<html>
<head>
    <title>Simple GraphiQL Example</title>
    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>

<script
        crossorigin
        src="https://unpkg.com/react/umd/react.production.min.js"
></script>
<script
        crossorigin
        src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
></script>
<script
        crossorigin
        src="https://unpkg.com/graphiql/graphiql.min.js"
></script>

<script>
    /*例子：
        （1）
        {
          __schema {
            types {
              name
              kind
              description
            }
          }
        }

        //结果有 Users，Query 等等


        （2）
        {
          __type(name: "users") {
            name
            fields {
              name
              description
              type {
                name
              }
            }

          }
        }

        （3）查询所有Query
        {
          __type(name: "Query") {
            name
            fields {
              name
            }

          }
        }

        (3) 查询Mutation
        {
          __type(name: "Mutation") {
            name
            fields {
              name
              type {
                name
              }
            }

          }
        }

        //结果： updateUserPassword


    */
    //https://github.com/graphql/graphiql/blob/main/packages/graphiql/README.md
    const graphQLFetcher = graphQLParams =>
        fetch(window.location.origin+'/graphql', {
            method: 'post',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(graphQLParams),
        })
            .then(response => response.json())
            .catch((response) => {
                    console.log(response)
                }

            );
    ReactDOM.render(
        React.createElement(GraphiQL, { fetcher: graphQLFetcher }),
        document.getElementById('graphiql'),
    );
</script>
</body>
</html>
